
<template>
  <div class="popupMask">
    <div class="popupPenal">
      <div class="popPenalTitle">
        <div class="popPenalTitleName">
          样品接收
          <span style="color:green;">
            样品{{yangpnum}}
          </span>
          <el-button type="primary" size="mini" >样品作废</el-button>
            
          <el-button v-if="yangpnum>1" size="mini" @click="yangpnum--">上一个</el-button>
          <el-button v-if="yangpnum<10" size="mini" @click="yangpnum++">下一个</el-button>
        </div>
        <div class="popupClose" v-on:click="close">
          <el-button size="mini">关闭</el-button>
        </div>
      </div>
      <div class="penalContent" >
        <div>
          <div class="penalrow selectw100">
            <div class=" width100 ">
                <div class="inlineblock verticalmiddle">
                  采样人
                </div>
                <div class="inlineblock verticalmiddle informationItem">
                    <el-input size="mini" placeholder="展示默认采样人，可编辑"></el-input>
              </div>
            </div>
          </div>
          <div class="penalrow selectw100">
            <div class=" width100 ">
                <div class="inlineblock verticalmiddle">
                  接收人
                </div>
                <div class="inlineblock verticalmiddle informationItem">
                    <el-input size="mini" placeholder="默认显示当前用户"></el-input>
              </div>
            </div>
          </div>
          <div class="penalrow selectw100">
            <div class=" width100 ">
              <div class="inlineblock verticalmiddle">
                接收时间
              </div>
              <div class="inlineblock verticalmiddle informationItem">
                  <el-input size="mini" placeholder="默认显示当前日期时间"></el-input>
              </div>
            </div>
          </div>
          <div class="penalrow selectw100">
            <div class=" width100 ">
              <div class="inlineblock verticalmiddle">
                采样日期
              </div>
              <div class="inlineblock verticalmiddle informationItem">
                  <el-input size="mini" placeholder="展示采样日期"></el-input>
              </div>
            </div>
          </div>
          <div class="penalrow selectw100">
            <div class=" width100 ">
                <div class="inlineblock verticalmiddle">
                  样品性状
                </div>
                <div class="inlineblock verticalmiddle informationItem">
                    <el-input size="mini" placeholder="展示样品性状"></el-input>
              </div>
            </div>
          </div>
          <div class="penalrow selectw100">
            <el-button type="primary" size="mini" @click="addbottletype">添加</el-button>
            【多选时这里默认显示第一个勾选样品设置的采样瓶类型及数量，且可以编辑】
          </div>
          <div class="penalrow selectw100">
            <el-table
                :data="acceptdatatable"
                style="width: 100%"
                size="mini"
                border
                >
                <el-table-column
                  property="rongqileix"
                  label="容器材质"
                  min-width="100px">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.rongqileix" placeholder="请选择" size="mini">
                        <el-option
                          v-for="item in rongqileix"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  property="rongqileix"
                  label="容器容量"
                  min-width="100px">
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.rongqirongliang" placeholder="请选择" size="mini">
                        <el-option
                          v-for="item in rongqirongliang"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  property="shuliang"
                  label="容器数量"
                  min-width="130px">
                  <template slot-scope="scope">
                    <el-input-number v-model="scope.row.shuliang"  size="mini" :min="1" :max="10"></el-input-number>
                  </template>
                </el-table-column>
                <el-table-column
                  property="liuyang"
                  label="是否留样"
                  min-width="70px">
                  <template slot-scope="scope">
                    <el-checkbox v-model="scope.row.liuyang">{{scope.row.liuyang?'留样':'不留样'}}</el-checkbox>
                  </template>
                </el-table-column>
                <el-table-column
                  property="liuyangweizhi"
                  label="留样位置"
                  min-width="100px">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.liuyangweizhi" size="mini" placeholder="留样位置"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  property="liuyangqixian"
                  label="留样期限"
                  min-width="100px">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.liuyangqixian" size="mini" placeholder="留样期限"></el-input>
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  min-width="100px">
                  <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="deletebottle(scope.$index)">删除</el-button>
                  </template>
                </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class=" penalFooter">
              <el-button class="penalButton" type="primary" size="mini" v-on:click="close2">接收</el-button>
              <el-button class="penalButton" size="mini" v-on:click="close">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>

import { mapState } from 'vuex'

export default {
  data () {
    return {
      yesornoValue:'1',
      enableStatusValue:'1',
      pingshu:1,
      liuyangshu:0,
      acceptdatatable:[
                        {
                          rongqileix:'000',
                          rongqirongliang:'000',
                          shuliang:2,
                          liuyang:true,
                          liuyangweizhi:'101-v',
                          liuyangqixian:'2018-08-08'
                        },
                        {
                          rongqileix:'001',
                          rongqirongliang:'000',
                          shuliang:2,
                          liuyang:true,
                          liuyangweizhi:'102-v',
                          liuyangqixian:'2018-08-08'
                        },
                        {
                          rongqileix:'002',
                          rongqirongliang:'000',
                          shuliang:2,
                          liuyang:true,
                          liuyangweizhi:'101-v',
                          liuyangqixian:'2018-08-08'
                        }
      ],
      rongqileix:[
                    {
                      value:'000',
                      label:'塑料瓶'
                    },
                    {
                      value:'001',
                      label:'玻璃瓶'
                    },
                    {
                      value:'002',
                      label:'棕瓶'
                    },
                    {
                      value:'003',
                      label:'白瓶'
                    }
      ],
      rongqirongliang:[
                        {
                          value:'000',
                          label:'200ml'
                        },
                        {
                          value:'001',
                          label:'300ml'
                        },
                        {
                          value:'002',
                          label:'5000ml'
                        },
                        {
                          value:'003',
                          label:'1000ml'
                        }
      ],
      yangpnum:1,
    }
  },
  computed:{
    ...mapState(['enableStatus','tableHeightA','yesorno','enableStatus']),
  },
  props:['newOrEdit','canEdit'],
  methods:{
    close(){
      this.$parent.acceptDetailShow = false;
    },
    close2(){
      this.$confirm('导出样品接受单成功', '提示', {
				confirmButtonText: '确定',
				// cancelButtonText: '',
				type: 'warning'
			}).then(() => {

      }).catch(() => {

        });
      // this.$parent.printConfirmShow = true;
    },
    addbottletype(){
      this.acceptdatatable.push({

                          rongqileix:'',
                          shuliang:'0',
                          liuyang:false,
                          liuyangweizhi:'',
                          liuyangqixian:''
      })
    },
    deletebottle(index){
      console.log(index)
      this.acceptdatatable.splice(index,1);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.tabName{
    display: inline-block;
    cursor: pointer;
    padding: 0px 15px;
    border: 1px solid #b7b7b7;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    color: #a9a9a9;
}
.activeTab{
  color: #409eff;
}
.tabPageContent{

}
.el-message-box__btns button:nth-of-type(0){
  display: none;
}
</style>
